import { showLoadingToast, showDialog, showConfirmDialog, closeDialog } from 'vant';
import { useI18n } from 'vue-i18n';
import type { ToastOptions, DialogOptions } from 'vant';
import checkedSvg from '@/assets/svgs/checked.svg';
import warningSvg from '@/assets/svgs/warning.svg';
import { promiseTimeout } from '@vueuse/core';
import { isString } from 'lodash-es';

export default function usePopup() {
  const { t } = useI18n();
// 加载状态提示
  const _showLoadingToast = (options?: ToastOptions) => {
    showLoadingToast({
      message: t('努力加载中'), // 默认加载文案
      forbidClick: true,        // 禁止背景点击
      duration: 0,             // 持续显示直到主动关闭
      loadingType: 'spinner',  // 加载图标类型
      teleport: 'body',         // 挂载到 body 防止样式污染
      ...options,               // 允许自定义覆盖
    });
  };
// 成功提示（带图标）
  const _showSuccessToast = async (options?: (DialogOptions & { duration: number }) | string) => {
    const {
      title = '已提交',
      message = '', // 请耐心等待，预估1分钟后到账
      duration = 2000,
      className,
      ...reset
    } = isString(options) ? { message: options } : options || {};
    showDialog({
      className: `custom-dialog-wrapper toast-wrapper ${className || ''}`,
      closeOnClickOverlay: true,
      showConfirmButton: false,
      allowHtml: true,
      teleport: 'body',
      message:
        `<div class="custom-dialog-content">` +
        `<img class="checked-icon" src="${checkedSvg}" />` +
        `${!!title ? '<span class="title">' + title + '</span>' : ''}` +
        `${!!message ? '<span class="message">' + message + '</span>' : ''}` +
        `</div>`,
      ...reset,
    });
    await promiseTimeout(duration);
    closeDialog();
  };
// 失败提示（带图标）
  const _showFailToast = async (options?: (DialogOptions & { duration: number }) | string) => {
    const {
      title = '',
      message = '',
      duration = 2000,
      className,
      ...reset
    } = isString(options) ? { message: options } : options || {};
    showDialog({
      className: `custom-dialog-wrapper toast-wrapper ${className || ''}`,
      closeOnClickOverlay: true,
      showConfirmButton: false,
      allowHtml: true,
      teleport: 'body',
      message:
        `<div class="custom-dialog-content">` +
        `<img class="checked-icon" src="${warningSvg}" />` +
        `${!!title ? '<span class="title">' + title + '</span>' : ''}` +
        `${!!message ? '<span class="message">' + message + '</span>' : ''}` +
        `</div>`,
      ...reset,
      overlayStyle: { background: 'transparent' },
    });
    await promiseTimeout(duration);
    // closeDialog();
  };

  const _showConfirmDialog = async (options?: DialogOptions & { duration?: number }) => {
    const {
      title = '风控提示',
      message = '', // 请耐心等待，预估1分钟后到账
      duration = 2000,
      className,
      ...reset
    } = options || {};
    return showConfirmDialog({
      className: `custom-dialog-wrapper ${className || ''}`,
      closeOnClickOverlay: false,
      showConfirmButton: false,
      allowHtml: true,
      teleport: 'body',
      message:
        `<div class="custom-dialog-content">` +
        `<img class="fail-icon" src="${warningSvg}" />` +
        `${!!title ? '<span class="title">' + title + '</span>' : ''}` +
        `${!!message ? '<p class="message">' + message + '</p>' : ''}` +
        `</div>`,
      ...reset,
    });
  };

  return {
    showLoadingToast: _showLoadingToast,
    showSuccessToast: _showSuccessToast,
    showFailToast: _showFailToast,
    _showConfirmDialog
  };
}
